<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn">点击</button>
    <script>
      // es5 函数
      var say = function(a, b) {
        console.log(a, b)
        return a + b
      }
      //es6 箭头函数
      var say = (a, b) => {
        console.log(a, b)
        return a + b
      }
      //2 es6 箭头函数  一个参数  一个返回值或一句代码
      // var run = a => a
      // var run = function(a) {
      //   return a
      // }
      // var getCookie = a => console.log(a)
      // var getCookie=function(a){
      //   console.log(a)
      // }
      //3 没有参数 或多个参数  要加()
      var setCookie = () => {
        console.log(1)
        console.log(2)
      }
      //4 变量或对象或回调函数 都可以简写为回调函数
      // 箭头函数没有this指向 / this指向都是继承父级的this指向
      var name = 'bmw'
      var obj = {
        name: '奔驰',
        // run: function() {
        //   console.log(this.name)
        // }
        run: () => {
          console.log(this.name)
        }
        // run(){}
      }
      var btn = document.getElementById('btn')

      btn.onclick = function() {
        // var that = this
        // setTimeout(function() {
        //   that.style.background = 'blue'
        // }, 2000)
        setTimeout(() => {
          this.style.background = 'blue'
        }, 2000)
      }

      //
      var mysay = (...rest) => {
        console.log(rest)
      }
      // 2、箭头函数不绑定arguments，取而代之用rest参数...解决
      //  *      可以使用 rest 参数 ...参数
      mysay(1, 2, 3, 4, 5)

      /**
       * 箭头函数 和 普通函数的区别是什么？
       *  1、this指向
       *      箭头函数 this 指向定义时所在的对象。 不变的
       *          箭头函数没有 this /this 是父级的this指向
       *      普通函数 this 指向调用时所在的对象。 可变的
       *  2、箭头函数不绑定arguments，取而代之用rest参数...解决
       *      可以使用 rest 参数 ...参数
       *  3、箭头函数是匿名函数，不能作为构造函数，不能使用new
       *      不能new
       *  4、箭头函数不能当做Generator函数,不能使用yield关键字
       */
    </script>
  </body>
</html>
